<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // for in 和 for of的区别

        // for..of遍历获取对象的值，而for...in遍历获取对象的键名
        // for...in会遍历对象的整个原型链，for...of只遍历当前对象
        // 而对于数组来说，for...in返回数组中所有的可枚举的属性，for...of返回数组的下标对应的值

        /*
            总结：for...in更适合对象，不适合数组。而for...of的循环可以遍历很多类型的数据，比如数组、类数组对象、字符串、set、map类型的数据
        */ 


        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        Person.prototype.height = '188cm';
        let p = new Person('mika', 18, '男');

        Person.prototype[Symbol.iterator] = function () {
            let that = this;
            let index = 0;
            let arr = Object.keys(this);
            return {
                next() {
                    return {
                        value: that[arr[index++]],
                        done: index >= arr.length + 1
                    }
                }
            }
        }

        for (let value of p) {
            console.log(value);
        }

        // 可以看到，for...in遍历到了Person.prototype上的height属性
        for(let key in p){
            console.log(key);
        }
    </script>
</body>

</html>